<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <title>My Webpage</title>
<style>
.sidebar {
    float: left;
    width: 10%;
    height: 100%;
    background-color: #f1f1f1;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.sidebar li a {
    color: #000;
    text-decoration: none;
}

.content {
    float: right;
    width: 80%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
</style>    
</head>
<body>
    <div class="sidebar">
        <ul>
            <li><a href="mqttSetting">MQTT</a></li>
            <li><a href="userSetting">USER</a></li>
            <li><a href="deviceInfo">DEVICE</a></li>
        </ul>
    </div>
    <div class="content">
        <form name="deviceForm">
        <table align="left">
        <caption>设备信息<caption/>
            <tr>
            <tr>
                <td>继电器状态:</td>
                <td>
                    <input type="text" name="State"style="border: none ; outline: none" readonly >
                </td>              
            </tr>              
            <tr>
                <td>设备MAC:</td>
                <td>
                    <input type="text" name="Mac"style="border: none ; outline: none" readonly >
                </td>              
            </tr>              
            <tr>
                <td>软件版本:</td>
                <td>
                    <input type="text" name="softVer" style="border: none ; outline: none" readonly >
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>
<script>
    window.onload = function requestData()
    {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                console.log("%s", this.responseText);
				
				var obj = JSON.parse(this.responseText);
        console.log("relayState:%s", obj.State);
			  console.log("Mac:%s", obj.Mac);      
				console.log("softVer:%s", obj.softVer);
				
				if( obj.hasOwnProperty("State") )
				{
					deviceForm.State.value = obj.State;
				}
				if( obj.hasOwnProperty("Mac") )
				{
	        deviceForm.Mac.value = obj.Mac;
				}
				if( obj.hasOwnProperty("softVer") )
				{
          deviceForm.softVer.value = obj.softVer;
				}			
				
            }
        };   
        xhttp.open("GET", "/deviceInfoValue", true);
        xhttp.send();
    }
</script>
</html>